<template>
	<div class="auditer">
		<el-row :gutter="20">
			<el-col :span="8">
				<div class="padding10 tree" ref="tree" :style="{ height: '75vh', overflow: 'auto' }">
					<el-input
						prefix-icon="el-icon-search"
						placeholder="输入关键字进行过滤"
						v-model="filterText"
						clearable
						style="margin-bottom: 10px"
					></el-input>
					<el-tree
						class="filter-tree"
						:data="deptData"
						:props="defaultProps"
						default-expand-all
						:filter-node-method="filterNode"
						highlight-current
						ref="tree"
						@node-click="chooseDept"
					></el-tree>
				</div>
			</el-col>
			<el-col :span="16">
				<loading :show="parentShow">
					<el-table
						ref="ElTable"
						:data="tableData"
						style="width: 100%; margin-bottom: 20px"
						row-key="id"
						border
						default-expand-all
						@select="onTableSelect"
						@select-all="onTableSelect"
					>
						<el-table-column type="selection" reserve-selection :selectable="selectable"></el-table-column>
						<el-table-column prop="loginName" label="账号" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column width="100px" label="头像" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<el-image
									v-if="scope.row.avatar"
									:src="scope.row.avatar"
									style="width: 100px; height: 100px"
									:preview-src-list="[scope.row.avatar]"
									fit="cover"
								/>
							</template>
						</el-table-column>
						<el-table-column prop="nickname" label="昵称" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="realName" label="实名" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="phone" label="电话" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column width="50" label="性别" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<span v-if="scope.row.gender == 'm'">男</span>
								<span v-if="scope.row.gender == 'f'">女</span>
							</template>
						</el-table-column>
					</el-table>
					<pagination
						:total="page.total"
						:current-page="page.current"
						:page-size="page.size"
						@refreshData="onPageChange"
					></pagination>
				</loading>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { deptList } from "@/api/auth/sysdept.js"
import { userPage } from "@/api/auth/sysuser.js"
import FortressPagination from "@/components/fortress-pagination.vue"

export default {
	name: "auditer",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		visible: {
			type: Boolean,
		},
		value: {},
	},
	data() {
		return {
			treeHeight: window.innerHeight * 0.8,
			filterText: "",
			deptData: [],
			defaultProps: {
				children: "children",
				label: "name",
			},
			parentShow: false,
			tableData: [],
			selection: [],
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			deptId: "",
		}
	},
	computed: {
		modelValue: {
			get() {
				return this.value
			},
			set(value) {
				this.$emit("update:value", value)
			},
		},
		modelValueIds() {
			return this.modelValue.map(item => item.id)
		},
	},
	methods: {
		filterNode(value, data) {
			if (!value) return true
			return data.name.indexOf(value) !== -1
		},
		chooseDept(data) {
			this.sleDeptId = data.id
			this.page.current = 1
			this.page.size = 10
			this.page.total = 0
			this.queryList(data.id)
		},
		queryDeptList() {
			deptList().then(resp => {
				if (resp.code == 0) {
					this.deptData = resp.data
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		queryList(deptId) {
			this.parentShow = true
			this.deptId = deptId
			userPage({
				deptId: deptId,
				current: this.page.current,
				size: this.page.size,
			}).then(resp => {
				if (resp.code == 0) {
					this.parentShow = false
					this.tableData = resp.data.records
					this.page.total = resp.data.total

					this.toggleRowSelection()
				} else {
					this.parentShow = false
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		onSubmit() {
			this.modelValue = this.selection.map(item => {
				return {
					id: item.id,
					realName: item.realName,
					isSelf: true,
				}
			})

			this.onCancel()
		},
		onCancel() {
			this.selection = []
			this.$refs.ElTable.clearSelection()
		},
		onPageChange({ current, size }) {
			this.page.current = current
			this.page.size = size
			this.queryList(this.deptId)
		},

		onTableSelect(selection) {
			this.selection = selection
		},
		toggleRowSelection() {
			const selection = this.tableData.filter(item => this.modelValueIds.includes(item.id))

			selection.forEach(item => {
				const index = this.selection.findIndex(i => i.id == item.id)
				if (index == -1) {
					this.selection.push(item)
				}
				this.$refs.ElTable.toggleRowSelection(item, true)
			})
		},
		selectable(row) {
			const data = this.modelValue.find(item => item.id == row.id)
			return data ? data.isSelf : true
		},
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val)
		},
		visible: {
			immediate: true,
			handler() {
				if (this.visible) {
					this.tableData = []
					this.queryDeptList()
					this.queryList()
				}
			},
		},
	},
	components: {
		Pagination: FortressPagination,
	},
}
</script>

<style lang="scss" scoped></style>
